<template>
	<view>
		<!-- 视频 短讯 -->
		<view style="box-sizing: border-box; padding: 10px; background: #fff; margin-bottom: 10px;">
			<view style="display: flex; border-bottom: #eee solid 1px; padding-bottom: 8px;" v-if="articleInfo">
				<view @click="tipPage()">
					<u-avatar style="vertical-align: -19px; margin-right: 10px;"
						:src="articleInfo.user_avatar||'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg'">
					</u-avatar>
					{{articleInfo.user_nickname}}
				</view>
				<view style="margin-left: auto;" v-if="user_id != articleInfo.user_id">
					<view style="width: auto;
					margin-top: 8px;
					background: #FA9700;
					color: #fff;
					text-align: center;
					line-height: 26px;
					height: 26px;
					border-radius: 30px;
					padding: 0 10px;" @click="goConcern">
						+{{articleInfo.is_concern==0?'关注':'已关注'}}
					</view>
				</view>
			</view>
			<navigator style="background: #fff;" :url="'/pages/article/article?id='+articleInfo.id" class="item"
				hover-class="none" v-if="articleInfo">
				<view class="title"
					style="line-height: 46px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
					<span v-if="articleInfo.is_top==1"
						style="border-radius: 4px; border: #EA9B37 solid 1px; color: #EA9B37; padding: 1px 6px; font-size: 10px; margin-right: 6px;">{{articleInfo.is_top==0?'置顶':'已置顶'}}</span>
					{{articleInfo.content}}
				</view>
				<!-- <view style="width: 100%; height: 140px; overflow: hidden; border-radius: 6px;">
				<image style="width: 100%;"
					src="https://pic.rmb.bdstatic.com/bjh/down/50fceb9013d48f7aeb03e40659db5e7d.jpeg@c_1,w_408,h_272,x_88,y_81"
					mode="widthFix"></image>
			</view> -->
				<view v-if="articleInfo.type==2"
					style="width: 100%;display: flex;text-align: center; overflow: hidden; border-radius: 6px; position: relative;">
					<!-- <view style="position: absolute; z-index: 1; top: 50%; left: 50%; transform:translate(-50%,-50%)">
						<u-icon color="#fff" size="40px" name="play-right-fill"></u-icon>
					</view>
					<image style="width: 100%;" mode="widthFix" :src="articleInfo.video+'?vframe/jpg/offset/1'"></image> -->
					<video :src="articleInfo.video" :poster="articleInfo.video+'?vframe/jpg/offset/4'"
						style="width: 100%;" @pause="onePlay"></video>
				</view>
			</navigator>
			<view
				style="width: 100%;display: flex;flex-wrap: wrap;text-align: center; overflow: hidden; border-radius: 6px;" v-if="articleInfo">
				<!-- <image style="width: 100%;" :src="item.photo_url" mode="widthFix"></image> -->
				<!-- <view @click="k(items)" v-if="articleInfo.type==0"  v-for="(items,i) in articleInfo.images" class="listboxlist"
				style=" flex:30%;margin-right:10px; overflow: hidden; border-radius: 6px;">
				<image style="width: 100%;" :src="items" mode="widthFix"></image>
			</view> -->

				<view @click="k(articleInfo,i)" v-if="articleInfo.type==0" v-for="(items,i) in articleInfo.images"
					style="flex-wrap: wrap; overflow: hidden; border-radius: 6px; line-height: 0; box-sizing: border-box; padding: 5px 2px;"
					:style="{'width':articleInfo.images.length>3?'33.3%':100/articleInfo.images.length+'%'}">
					<image style="width: 100%;" :src="items" mode="widthFix"></image>
				</view>




			</view>
			<view class="line"></view>

			<view style="display: flex; align-items: center; 
			width: calc(100% - 40rpx);
			margin-left: 20rpx;
			line-height: 40px; justify-content: space-between;" v-if="articleInfo">
				<view style=" text-align: center;">
					<image style="width: 20px; height: 14px; margin-right: 8px; vertical-align: -3px;"
						src="/static/x1.png" mode="widthFix">
					</image>
					{{articleInfo.browse}}
				</view>
				<view style=" text-align: center;">
					<image @click="goDetail" style="width: 20px; height: 14px; margin-right: 8px; vertical-align: -3px;"
						mode="widthFix" src="/static/x2.png">
					</image>
					{{articleInfo.comment}}
				</view>
				<view style=" text-align: center;">
					<image @click="show=true"
						style="width: 20px; height: 14px; margin-right: 8px; vertical-align: -3px;" src="/static/x3.png"
						mode="widthFix">
					</image>
					{{articleInfo.transpond}}
				</view>
				<view style="text-align: center;">
					<image v-if="articleInfo.is_like==0" @click="changeDian(articleInfo.id)"
						style="width: 20px; height: 14px; margin-right: 8px; vertical-align: -3px;" src="/static/x4.png"
						mode="widthFix">
					</image>
					<image v-if="articleInfo.is_like==1" @click="changeDian(articleInfo.id)"
						style="width: 20px; height: 16px; margin-right: 8px; vertical-align: -3px;" mode="widthFix"
						src="../../static/selsect_dianzan.png"></image>
					{{articleInfo.like}}
				</view>
			</view>



			<!-- 热门推荐 -->
			<view style="padding: 10px 0;">
				<u-divider color="#EA9B37" half-width="200" border-color="#EA9B37">热门推荐</u-divider>
			</view>
			<view style="margin-bottom: 10px;" v-for="(item,index) in NewsFlashdata" :key="index">
				<navigator style="background: #fff;" :url="'/pages/article/article?id='+item.id" class="item"
					hover-class="none">
					<view class="title"
						style="line-height: 46px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
						<span v-if="item.is_top==1"
							style="border-radius: 4px; border: #EA9B37 solid 1px; color: #EA9B37; padding: 1px 6px; font-size: 10px; margin-right: 6px;">{{item.is_top==0?'置顶':'已置顶'}}</span>
						{{item.content}}
						<!-- <view style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; "><u-parse :html="item.content"></u-parse></view> -->
					</view>
					<!-- <view style="width: 100%; height: 140px; overflow: hidden; border-radius: 6px;">
					<image style="width: 100%;"
						src="https://pic.rmb.bdstatic.com/bjh/down/50fceb9013d48f7aeb03e40659db5e7d.jpeg@c_1,w_408,h_272,x_88,y_81"
						mode="widthFix"></image>
				</view> -->
					<view v-if="item.type==2"
						style="width: 100%;display: flex;text-align: center; overflow: hidden; border-radius: 6px; position: relative;">
						<view
							style="position: absolute; z-index: 1; top: 50%; left: 50%; transform:translate(-50%,-50%)">
							<u-icon color="#fff" size="40px" name="play-right-fill"></u-icon>
						</view>
						<image style="width: 100%;" mode="widthFix" :src="item.video+'?vframe/jpg/offset/1'"></image>
						<!-- <video :src="item.video" :poster="item.video+'?vframe/jpg/offset/4'"
						style="width: 100%;"></video> -->
					</view>
				</navigator>
				<view
					style="width: 100%;display: flex;flex-wrap: wrap;text-align: center; overflow: hidden; border-radius: 6px;">
					<!-- <image style="width: 100%;" :src="item.photo_url" mode="widthFix"></image> -->
					<view @click="k(item,i)" v-if="item.type==0" v-for="(items,i) in item.images"
						style="flex-wrap: wrap; overflow: hidden; border-radius: 6px; line-height: 0; box-sizing: border-box; padding: 5px 2px;  "
						:style="{'width':item.images.length>3?'33.3%':100/item.images.length+'%'}">
						<image style="width: 100%;" :src="items" mode="widthFix"></image>
					</view>

					<!-- <view @click="k(items)" v-if="item.type==0"  v-for="(items,i) in item.images" class="listboxlist"
					style=" flex:30%;margin-right:10px; overflow: hidden; border-radius: 6px;">
					<image style="width: 100%;" :src="items" mode="widthFix"></image>
				</view> -->
					<!-- <view class="" v-if="item.type==2">
					<video :src="item.video" controls style="width: 750rpx;height: 456rpx;"></video>
				</view> -->


				</view>
				<view class="line"></view>

				<!-- <view style="display: flex; align-items: center; line-height: 40px; justify-content: center;">
				<view style="width: 25%; text-align: center;">
					<image style="width: 22px; height: 16px; margin-right: 8px; vertical-align: -3px;" src="/static/x1.png">
					</image>
					{{item.browse}}
				</view>
				<view style="width: 25%; text-align: center;" >
					<image @click="goDetail" style="width: 14px; height: 14px; margin-right: 8px; vertical-align: -3px;" src="/static/x2.png">
					</image>
					{{item.comment}}
				</view>
				<view style="width: 25%; text-align: center;">
					<image @click="goDetail" style="width: 14px; height: 14px; margin-right: 8px; vertical-align: -3px;" src="/static/x3.png">
					</image>
					{{item.transpond}}
				</view>
				<view style="width: 25%; text-align: center;">
					<image v-if="item.is_like==0" @click="changeDian(item.id)" style="width: 14px; height: 14px; margin-right: 8px; vertical-align: -3px;" src="/static/x4.png">
					</image>
					<image v-if="item.is_like==1" @click="changeDian(item.id)" style="width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px;" src="../../static/selsect_dianzan.png" mode="aspectFill"></image>
					{{item.like}}
				</view>
			</view> -->
			</view>

		</view>
		<!-- 分享弹框 -->
		<u-popup v-model="show" mode="bottom">

			<!-- <view style="line-height: 50px; text-align: center;">
				<scroll-view scroll-x="true" >
					<view style="display: flex;">
						<view @click="goUrl(item.id)" v-for="(item,index) in attentList" style="width: 100px; margin-top: 5px; text-align: center; flex: 1;">
							<view>
								<image style="width: 50px; height: 50px; border-radius: 50%;" :src="item.avatar"></image>
								<view style="line-height: 20px;">{{item.nickname}}</view>	
							</view>
						</view>
					</view>
					
				</scroll-view>
			</view> -->
			<view style="padding: 20px; display: flex; text-align: center; justify-content: space-around;">
				<view style="width: 50%;" @click="publish('WXSceneSession')">
					<image src="/static/wx.png" style="width: 50px; height: 50px;"></image>
					<view>
						微信
					</view>
				</view>
				<view style="width: 50%;" @click="publish('WXSceneTimeline')">
					<image src="/static/pengyouquan.png" style="width: 50px; height: 50px;"></image>
					<view>
						朋友圈
					</view>
				</view>
			</view>
		</u-popup>

		<u-back-top :scroll-top="scrollTop"></u-back-top>
	</view>
</template>

<script>
	import {
		homeDetail,
		addConcern,
		cancelConcern,
		addLike,
		cancelLike,
		getNewsFlash,
		getVideoList,
		transpond
	} from "@/common/config/request.js"
	export default {
		data() {
			return {
				articleInfo: "", //文章详情
				id: "", //发布得id
				user_id: '',
				page: 1,
				NewsFlashdata: [],
				scrollTop: 0,
				type: '',
				show: false,
				imgUrl: "",
			}
		},
		onLoad(option) {
			console.log(option.type, '2222')
			this.user_id = uni.getStorageSync('userdata').id
			this.imgUrl = this.config.baseURL + "/register.html?postId=" + this.user_id
			this.id = option.id
			var type = option.type ? option.type : 'img'
			this.type = option.type ? option.type : 'img'
			// if(option.type){
			// this.type=type
			// }
			// this.NewsFlash()
		},
		onShow() {
			this.articleInfo = ""
			this.NewsFlashdata = []
			this.getHomeDetail()
			this.NewsFlash(this.type)
		},
		onReachBottom() {
			this.page++
			this.NewsFlash(this.type)
		},
		methods: {
			onePlay() {},
			savePlay(index) {

			},
			k(item, index) {
				console.log(item)
				// return false
				// let arr = []
				// arr.push(item)
				uni.previewImage({
					urls: item.images,
					current: index,
					longPressActions: {
						itemList: [],
						success: function(data) {

						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					},
				})
			},
			tipPage() {
				uni.navigateTo({
					url: '../user/info?uid=' + this.articleInfo.user_id + '&is_concern=' + this.articleInfo
						.is_concern
				})
			},
			goDetail() {
				uni.navigateTo({
					url: '/pages/article/article?id=' + this.articleInfo.id
				})
			},
			// 分享
			publish(data) {
				var that = this
				uni.share({
					provider: "weixin",
					scene: data,
					type: 0,
					href: that.imgUrl,
					title: "邀请好友",
					summary: "快来注册吧",
					imageUrl: "",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
						var data = {
							id: that.articleInfo.id
						}
						console.log('22223333', data)
						transpond(data).then(res => {
							console.log(res)
							if (res.data.code == 1) {
								uni.showToast({
									icon: 'none',
									title: '分享成功'
								})
							}
						})
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			//分享到微信朋友圈
			shareFriendcricle() {
				uni.share({
					provider: 'weixin',
					scene: 'WXSceneTimeline',
					type: 0,
					href: that.imgUrl,
					title: '邀请好友',
					summary: '快来注册吧。',
					imageUrl: '',
					success: (res) => {
						console.log('success:' + JSON.stringify(res));
					},
					fail: (err) => {
						console.log('fail:' + JSON.stringify(err));
					}
				});
			},
			// 点赞 和  取消点赞
			changeDian(id) {
				if (this.articleInfo.is_like == 0) {
					// 点赞
					var data = {
						push_id: this.articleInfo.id
					}
					addLike(data).then((res) => {
						if (res.data.code == 1) {
							uni.showToast({
								icon: 'none',
								title: '成功点赞'
							})
							this.articleInfo.is_like = 1
							this.articleInfo.like++
						}
					})
				} else {
					// 取消点赞
					var data = {
						push_id: this.articleInfo.id
					}
					cancelLike(data).then((res) => {
						if (res.data.code == 1) {
							uni.showToast({
								icon: 'none',
								title: '取消点赞'
							})
							this.articleInfo.is_like = 0
							this.articleInfo.like--
						}
					})
				}
			},
			NewsFlash(type) {
				let data = {
					page: this.page,
					limit: this.config.limit
				}
				console.log(type, 'this.type')
				if (type == 'video') {
					getVideoList(data).then((res) => {
						console.log(res, '体检')
						var regx = /<[^>]*>|<\/[^>]*>/gm;
						for (let i in res.data.data.data) {
							// if(res.data.data.data)
							console.log(res.data.data.data[i].content)
							if (res.data.data.data[i].content) {
								res.data.data.data[i].content = res.data.data.data[i].content.replace(regx, "")
							}
						}

						this.NewsFlashdata = [...this.NewsFlashdata, ...res.data.data.data]
					})
				} else {
					getNewsFlash(data).then((res) => {
						console.log(res, '体检')
						var regx = /<[^>]*>|<\/[^>]*>/gm;
						for (let i in res.data.data.data) {
							// if(res.data.data.data)
							console.log(res.data.data.data[i].content)
							if (res.data.data.data[i].content) {
								res.data.data.data[i].content = res.data.data.data[i].content.replace(regx, "")
							}
						}
						this.NewsFlashdata = [...this.NewsFlashdata, ...res.data.data.data]
					})
				}

			},
			getHomeDetail() {
				var data = {
					id: this.id
				}
				homeDetail(data).then((res) => {
					console.log(res, '文章详情')
					if (res.data.code == 1) {
						var regx = /<[^>]*>|<\/[^>]*>/gm;
						// for(let i in res.data.data.data){
						// if(res.data.data.data)
						if (res.data.data.content != '') {
							res.data.data.content = res.data.data.content.replace(regx, "")
						}
						// }

						this.articleInfo = res.data.data
					}
				})
			},
			goConcern() {
				// 关注与取消关注的操作 is_concern1已关注 0关注
				let data = {
					uid: this.articleInfo.user_id
				}
				if (this.articleInfo.is_concern == 1) {
					// 取消关注
					cancelConcern(data).then((res) => {
						if (res.data.code == 1) {
							this.articleInfo.is_concern = 0
							uni.showToast({
								icon: "none",
								title: '取消成功'
							})
						}
					})
				} else {
					// 关注成功
					addConcern(data).then((res) => {
						if (res.data.code == 1) {
							this.articleInfo.is_concern = 1
							uni.showToast({
								icon: "none",
								title: '关注成功'
							})
						}
					})
				}
			}
		}
	}
</script>

<style>
	.listboxlist {
		line-height: 0;
	}
</style>
<style lang="scss">
	page {
		background: #f0f0f0;
	}

	/*文章列表*/
	.list {
		margin-top: 2rpx;

		.item {
			padding: 40rpx 24rpx 0 24rpx;

			.info {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				padding-bottom: 4rpx;

				.text {
					flex-grow: 1;
					flex-shrink: 1;
					display: flex;
					flex-direction: column;
					margin-right: 40rpx;

					.title {
						flex-grow: 1;
						flex-shrink: 1;
						font-size: 34rpx;
						line-height: 1.5;
						display: -webkit-box;
						text-overflow: ellipsis;
						word-break: break-all;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
						height: 72rpx;
						margin-bottom: 8rpx;
					}

					.other {
						flex-grow: 1;
						flex-shrink: 1;
						display: flex;
						align-items: center;
						font-size: 28rpx;
						color: #999;
						line-height: normal;

						.left {
							display: flex;
							flex-grow: 1;
							flex-shrink: 1;

							.source {
								display: -webkit-box;
								text-overflow: ellipsis;
								word-break: break-all;
								-webkit-line-clamp: 1;
								-webkit-box-orient: vertical;
								overflow: hidden;
								width: 140rpx;
								margin-right: 16rpx;
							}
						}

						.right {
							display: flex;
							flex-direction: row;
							justify-content: center;
							align-items: center;
							flex-grow: 0;
							flex-shrink: 0;
							margin-right: 5rpx;

							image {
								flex-grow: 1;
								flex-shrink: 1;
								width: 28rpx;
								height: 28rpx;
								margin-right: 12rpx;
							}

							text {
								flex-grow: 1;
								flex-shrink: 1;
								margin-top: -6rpx;
							}
						}

						.view {
							image {
								width: 40rpx;
								height: 40rpx;
								margin-right: 5rpx;
							}
						}


					}
				}

				.photo {
					image {
						height: 170rpx;
						width: 222rpx;
						border-radius: 10rpx;
					}
				}
			}

			.line {
				display: bock;
				width: 100%;
				height: 1rpx;
				margin-top: 22rpx;
				background: #e8e8e8;
			}

			&:last-child {
				.line {
					//display: none;
				}

				//padding-bottom: 30rpx;
			}
		}
	}
</style>
